<template>
  <div class="white-box">
    <div class="table-mb">
      <el-button type="primary" @click="handleDetail">添加文章</el-button>
    </div>

    <div class="task-one">
      <div class="task-one__item">
        <span class="task-one__label">文章标题：</span>
        <el-input placeholder="请输入文章标题" v-model="searchParams.article_title" @keyup.enter.native="handleSearch"
                  clearable></el-input>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">文章分类：</span>
        <el-select v-model="searchParams.article_category_id" placeholder="请选择文章分类" clearable>
          <el-option :label="item.title" :value="item.id" v-for="(item, index) in article_category_id_list" :key="index"/>
        </el-select>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">是否显示：</span>
        <el-select v-model="searchParams.is_show" placeholder="请选择是否显示" clearable>
          <el-option label="是" :value="1"/>
          <el-option label="否" :value="2"/>
        </el-select>
      </div>
      <div class="task-one__item">
        <span class="task-one__label">创建时间：</span>
        <el-date-picker
            v-model="searchParamsTime"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
        />
      </div>
      <div class="task-one__btn clearfix">
        <el-button type="primary" :loading="searchBtnLoading" :icon="Search" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <el-table class="table-mb" v-loading="loading" :data="list" :header-cell-style="{ background: '#F5F7FA' }"
              element-loading-background="rgba(255, 255, 255, 0.6)">
      <el-table-column prop="article_category_id_label" label="分类"  width="180"></el-table-column>
      <el-table-column prop="article_title" label="文章标题"></el-table-column>
      <el-table-column prop="sort" label="排序" width="70"></el-table-column>
      <el-table-column prop="is_show" label="是否显示" width="80">
        <template #default="{ row }">
          <el-text v-if="row.is_show==1" type="success">显示</el-text>
          <el-text v-if="row.is_show==2" type="info">隐藏</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">编辑</el-button>
          <el-popconfirm :persistent="false" title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                         @confirm="handleDelete(row)" v-if="row.article_category_id != 1 && row.article_category_id != 2">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
                   :total="totalNums" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <go-back/>
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch
} from "vue"
import listMixins from "@mixins/list"
import {
  useRoute,
  useRouter
} from "vue-router"
import {
  Search
} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import {EluiChinaAreaDht} from "elui-china-area-dht";
import chinaAreaData from "china-area-data";

const {
  proxy
} = getCurrentInstance()

/**
 * minxin列表加载
 */
const {
  page,
  pageSizeNum,
  pageSize,
  loading,
  totalNums,
  searchParams,
  searchBtnLoading,
  apiPath,
  list,
  handleSearch,
  getData,
  handleAction
} = listMixins()

apiPath.value = 'admin/article/index?';
const router = useRouter()
const route = useRoute()
const article_category_id_list = [
  {
    id:1,
    title:'协议'
  },
  {
    id:2,
    title:'流程'
  },
  {
    id:3,
    title:'平台服务'
  },
  {
    id:4,
    title:'咨询/问答'
  }
];
const searchParamsTime = ref('');
watch(searchParamsTime,(newV, oldV)=>{
  if(!newV){
    searchParams.s_time = ''
    searchParams.e_time = ''
  }else{
    searchParams.s_time = newV[0]
    searchParams.e_time = newV[1]
  }
})
onMounted(() => {
  getData()
})
const handleDelete = (row) => {
  handleAction('admin/article/delete', {
    article_id: row.article_id,
  })
}

const handleDetail = (row) => {
  router.push({
    path: "/article/articleDetail",
    query: {
      id: row.article_id
    }
  })
}
</script>

<style lang="less">

</style>

